<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>Document</title>
    <style>
        body {
            height: 4000px;
        }

        .a{
            width: 3rem;
            height: 3rem;
            background-color: #f00;
        }
    </style>
    <script>

        window.onload = function() {
            var oDiv = document.getElementsByClassName('a')[0] ;
            console.log(oDiv);
        }


        // 页面在获取焦点的时候，页面资源优先加载
        // 页面失去焦点的时候，页面会延缓加载


        window.onfocus = function() {
            console.log('我是焦点');
        }

        window.onblur = function() {
            console.log('我不是焦点');
        }

    </script>
</head>

<body>

    <div class="a"></div>

    <script>

        // 淘宝的前端团队开发的新的适配方案 
        //    优化   dpr 设备像素比
        //    优化   屏幕太大  不会继续变大
        
        //   使用的时候   
        //       删除  meta  缩放   js会自己生成
        //       /75

        (function (win, lib) {
            var doc = win.document;
            var docEl = doc.documentElement;
            var metaEl = doc.querySelector('meta[name="viewport"]');
            var flexibleEl = doc.querySelector('meta[name="flexible"]');
            var dpr = 0;
            var scale = 0;
            var tid;
            var flexible = lib.flexible || (lib.flexible = {});

            if (metaEl) {
                console.warn('将根据已有的meta标签来设置缩放比例');
                var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
                if (match) {
                    scale = parseFloat(match[1]);
                    dpr = parseInt(1 / scale);
                }
            } else if (flexibleEl) {
                var content = flexibleEl.getAttribute('content');
                if (content) {
                    var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
                    var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
                    if (initialDpr) {
                        dpr = parseFloat(initialDpr[1]);
                        scale = parseFloat((1 / dpr).toFixed(2));
                    }
                    if (maximumDpr) {
                        dpr = parseFloat(maximumDpr[1]);
                        scale = parseFloat((1 / dpr).toFixed(2));
                    }
                }
            }
            if (!dpr && !scale) {
                var isAndroid = win.navigator.appVersion.match(/android/gi);
                var isIPhone = win.navigator.appVersion.match(/iphone/gi);
                var devicePixelRatio = win.devicePixelRatio;
                if (isIPhone) {
                    // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
                    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                        dpr = 3;
                    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                        dpr = 2;
                    } else {
                        dpr = 1;
                    }
                } else {
                    // 其他设备下，仍旧使用1倍的方案
                    dpr = 1;
                }
                scale = 1 / dpr;
            }
            docEl.setAttribute('data-dpr', dpr);
            if (!metaEl) {
                metaEl = doc.createElement('meta');
                metaEl.setAttribute('name', 'viewport');
                metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
                if (docEl.firstElementChild) {
                    docEl.firstElementChild.appendChild(metaEl);
                } else {
                    var wrap = doc.createElement('div');
                    wrap.appendChild(metaEl);
                    doc.write(wrap.innerHTML);
                }
            }

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                if (width / dpr > 540) {
                    width = 540 * dpr;
                }
                var rem = width / 10;
                docEl.style.fontSize = rem + 'px';
                flexible.rem = win.rem = rem;
            }
            win.addEventListener('resize', function () {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }, false);
            win.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);
            if (doc.readyState === 'complete') {
                doc.body.style.fontSize = 12 * dpr + 'px';
            } else {
                doc.addEventListener('DOMContentLoaded', function (e) {
                    doc.body.style.fontSize = 12 * dpr + 'px';
                }, false);
            }

            refreshRem();
            flexible.dpr = win.dpr = dpr;
            flexible.refreshRem = refreshRem;
            flexible.rem2px = function (d) {
                var val = parseFloat(d) * this.rem;
                if (typeof d === 'string' && d.match(/rem$/)) {
                    val += 'px';
                }
                return val;
            }
            flexible.px2rem = function (d) {
                var val = parseFloat(d) / this.rem;
                if (typeof d === 'string' && d.match(/px$/)) {
                    val += 'rem';
                }
                return val;
            }
        })(window, window['lib'] || (window['lib'] = {}));
    </script>

    <script>

        // onscroll   滚动条事件 
        // onresize   窗口大小发生改变
        // onload     页面加载完毕之后执行函数
        // onfocus    获取焦点
        // onblur     失去焦点



        // onscroll和onresize是一个高频率触发的事件   -- 稀释事件的执行频率
        //    防抖和节流


        // 防抖  持续性点击，不会执行，直到最后一次
        // var t ;
        // window.onscroll = function () {
        //     clearInterval(t) ;
        //     t = setTimeout(function() {
        //         console.log('我滚了');
        //     } , 300)
        // }


        // 节流   第一次就会触发，然后一段时间都不会再执行
        var flag = true ;
        window.onscroll = function () {
            if(flag) {
                flag = false ;
                var t = setTimeout(function() {
                    console.log('我滚了');
                    flag = true ;
                } , 300)
            }
            
        }











        // window.onresize = function () {
        //     console.log('我窗口大小便了了');
        // }

    </script>

</body>

</html>